<script setup lang="ts">
  import { getOrderStatusQty } from '@/api/order'
  import { TabPaneName } from 'element-plus'
  import { computed, ref } from 'vue'
  import { HMessageBox } from '@/components/common/message'
  import { useUserStore } from '@/store/modules/user'

  const emits = defineEmits<{
    (e: 'changeStatus', value: number, value2: number): void
  }>()

  const userStore = useUserStore()
  const activeName = ref(0)
  const activeChildName = ref(0)
  const orderStatusQtyData = ref<OrderListStatusQty>({
    totalOrder: 0,
    waitDispatch: 0,
    waitNetworkHandlerOrder: 0,
    handlerOrder: 0,
    statementReview: 0,
    finishOrder: 0,
    cancelOrder: 0,
    waitNetworkReceivingOrderQty: 0,
    waitNetworkDispatchOrderQty: 0,
    waitEngineerReceivingOrderQty: 0,
    feeWaitCheckQty: 0,
    spareWaitCheckQty: 0,
    waitCallPhoneQty: 0,
    waitReservationQty: 0,
    waitSignQty: 0,
    pending: 0,
    settled: 0,
  })

  const parentTabList = computed(() => {
    const result = [
      { name: 0, txt: `全部工单(${orderStatusQtyData.value.totalOrder})`, isHasChildStatus: false },
      { name: 1, txt: `待派单(${orderStatusQtyData.value.waitDispatch})`, isHasChildStatus: false },
      {
        name: 2,
        txt: `待网点处理(${orderStatusQtyData.value.waitNetworkHandlerOrder})`,
        isHasChildStatus: true,
      },
      { name: 3, txt: `处理中(${orderStatusQtyData.value.handlerOrder})`, isHasChildStatus: true },
      {
        name: 1001,
        txt: `结单审核(${orderStatusQtyData.value.statementReview})`,
        isHasChildStatus: false,
      },
      { name: 4, txt: `已完成(${orderStatusQtyData.value.finishOrder})`, isHasChildStatus: false },
      // { name: 1002, txt: '已结算', qtyKey: 'settled' },
      // { name: 1003, txt: '未结算', qtyKey: 'pending' },
      // {
      //   name: 1040,
      //   txt: `收款(${orderStatusQtyData.value.paymentStatusTotalCount})`,
      // },
      // { name: 1020, txt: '发票', qtyKey: 'openTicketTotalCount' },
      { name: 5, txt: `已取消(${orderStatusQtyData.value.cancelOrder})`, isHasChildStatus: false },
    ]

    if (userStore.isCurrentRoleNetwork) {
      return result.filter((item) => item.name !== 1040)
    }

    return result
  })

  const childTabList = computed(() => {
    if (activeName.value === 2) {
      return [
        { name: 0, txt: `全部(${orderStatusQtyData.value.waitNetworkHandlerOrder})` },
        { name: 1, txt: `网点未接单(${orderStatusQtyData.value.waitNetworkReceivingOrderQty})` },
        { name: 2, txt: `网点未派单(${orderStatusQtyData.value.waitNetworkDispatchOrderQty})` },
        { name: 3, txt: `工程师未接单(${orderStatusQtyData.value.waitEngineerReceivingOrderQty})` },
      ]
    }

    if (activeName.value === 3) {
      return [
        { name: 0, txt: `全部(${orderStatusQtyData.value.handlerOrder})` },
        // { name: 1, txt: '未拨打电话' },
        // { name: 2, txt: '未预约' },
        // { name: 3, txt: '未签到' },
        { name: 4, txt: `费用待审核(${orderStatusQtyData.value.feeWaitCheckQty})` },
        { name: 5, txt: `物料待审核(${orderStatusQtyData.value.spareWaitCheckQty})` },
        // { name: 6, txt: '条码待审核', qtyKey: 'snCodeWaitCheckCount' },
      ]
    }

    if (activeName.value === 1020) {
      return [
        // {
        //   name: 0,
        //   txt: `全部(${orderStatusQtyData.value.openTicketTotalCount})`,
        // },
        // {
        //   name: 2,
        //   txt: `已申请开票(${orderStatusQtyData.value.openTicketCount})`,
        // },
        // {
        //   name: 1,
        //   txt: `未开票(${orderStatusQtyData.value.notOpenTicketCount})`,
        // },
      ]
    }

    if (activeName.value === 1040) {
      return [
        // {
        //   name: 0,
        //   txt: `全部(${orderStatusQtyData.value.paymentStatusTotalCount})`,
        // },
        // {
        //   name: 2,
        //   txt: `已收款(${orderStatusQtyData.value.paymentStatusCount})`,
        // },
        // { name: 1, txt: `未收款(${orderStatusQtyData.value.notPaymentStatusCount})` },
      ]
    }

    return []
  })

  const tabClick = (tab: TabPaneName) => {
    activeName.value = Number(tab)
    activeChildName.value = 0
    emits('changeStatus', activeName.value, activeChildName.value)
  }
  const tabClickChild = (tab: TabPaneName) => {
    activeChildName.value = Number(tab)
    emits('changeStatus', activeName.value, activeChildName.value)
  }

  const getOrderStatusQtyData = async () => {
    const res = await getOrderStatusQty(10000, 1)
    if (res.data.code === 20000) {
      orderStatusQtyData.value = res.data.data.row
    } else {
      HMessageBox.error(res.data.message)
    }
  }

  defineExpose({
    getOrderStatusQtyData,
    setTabs: (status: 0 | 1 | 2 | 3 | 4 | 5 | 1001 | 1020 | 1040) => {
      activeName.value = status
    },
    setChildTabs: (
      status: 0 | 1 | 2 | 3 | 4 | 5 | 1001 | 1020 | 1040,
      childStatus: 0 | 1 | 2 | 3 | 4 | 5 | 6,
    ) => {
      activeName.value = status
      activeChildName.value = childStatus
    },
  })
</script>

<template>
  <div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="tabClick">
      <el-tab-pane
        v-for="item in parentTabList"
        :key="item.txt"
        :name="item.name"
        :label="item.txt"
      />
    </el-tabs>
    <div v-if="[2, 3, 1020, 1040].includes(activeName)" style="display: flex; align-items: center">
      筛选：&nbsp;&nbsp;
      <el-tabs v-model="activeChildName" class="demo-tabs-child" @tab-change="tabClickChild">
        <el-tab-pane
          v-for="item in childTabList"
          :key="item.txt"
          :name="item.name"
          :label="item.txt"
        />
      </el-tabs>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .demo-tabs {
    :deep(.el-tabs__header) {
      margin: 0 0 8px !important;

      .el-tabs__nav-wrap {
        .el-tabs__nav {
          .el-tabs__item.is-top:nth-child(2) {
            padding-left: 0;
          }
        }
      }
    }

    :deep(.el-tabs__nav-wrap::after) {
      height: 1px;
    }
  }

  .demo-tabs-child {
    &.el-tabs {
      --el-tabs-header-height: 26px;
    }

    :deep(.el-tabs__header) {
      margin: 0 0 2px;

      .el-tabs__nav-wrap {
        .el-tabs__nav {
          .el-tabs__item {
            padding: 0 10px;
            font-size: 12px;
          }

          .el-tabs__item.is-top:nth-child(2) {
            padding-left: 0;
          }
        }

        &::after {
          display: none;
        }
      }
    }

    :deep(.el-tabs__nav-wrap::after) {
      height: 1px;
    }
  }
</style>
